﻿const uri = 'api/todo';
let todos = null;

function setTotalCount(data) {
    const el = $('#counter');
    let name = '个代办事项';
    el.text(data + ' ' + name);
}

function getData() {
    $.ajax({
        type: 'GET',
        url: uri,
        success: function (data) {
            $('#todos').empty();
            setTotalCount(data.length);
            $.each(data, function (key, item) {
                const checked = item.isComplete ? 'checked' : '';
                $('<tr>' +
                    '<td class="' + (item.isComplete ? "completed" : "uncompleted") +
                    '"><label for="option-one" class="pure-checkbox"><input disabled="true" type="checkbox" ' + checked + '>' +
                    (item.isComplete ? '老哥稳' : '赶紧搞') + '</label></td>' +
                    //'<td>' + item.id + '</td>' +
                    '<td>' + item.name + '</td>' +
                    '<td>' + item.details + '</td>' +
                    '<td>' + (new Date(item.createTime).toLocaleString()) + '</td>' +
                    '<td>' + (item.isComplete ? new Date(item.completeTime).toLocaleString() : '还没完，赶紧搞') + '</td>' +
                    '<td><button class="pure-button pure-button-primary" onclick="showEditBox(' + item.id + ')">编辑</button></td>' +
                    '<td><button class="pure-button pure-button-primary" onclick="deleteItem(' + item.id + ')">删除</button></td>' +
                    '</tr>').appendTo($('#todos'));
            });

            todos = data;
        }
    });
}

function addItem() {
    const item = {
        'name': $('#add-name').val(),
        'details': $('#add-details').val(),
        'isComplete': false
    };

    $.ajax({
        type: 'POST',
        accepts: 'application/json',
        url: uri,
        contentType: 'application/json',
        data: JSON.stringify(item),
        error: function (jqXHR, textStatus, errorThrown) {
            alert('here');
        },
        success: function (result) {
            getData();
            $('#add-name').val('');
            $('#add-details').val('');
        }
    });
}

function deleteItem(id) {
    closeEditBox();
    $.ajax({
        url: uri + '/' + id,
        type: 'DELETE',
        success: function (result) {
            getData();
        }
    });
}

function showEditBox(id) {
    $.each(todos, function (key, item) {
        if (item.id === id) {
            $('#edit-id').val(item.id);
            $('#edit-name').val(item.name);
            $('#edit-details').val(item.details);
            $('#edit-is-complete').prop("checked", item.isComplete);
        }
    });
    $('#edit-box').css({ 'display': 'block' });
    $('#add-box').css({ 'display': 'none' });
}

function closeEditBox() {
    $('#edit-box').css({ 'display': 'none' });
    $('#add-box').css({ 'display': 'block' });
}

$(document).ready(function () {
    getData();
});

function editItem() {
    let id = $('#edit-id').val();
    const item = {
        'name': $('#edit-name').val(),
        'details': $('#edit-details').val(),
        'isComplete': $('#edit-is-complete').is(':checked'),
        'id': parseInt(id)
    };

    $.ajax({
        url: uri + '/' + id,
        type: 'PUT',
        accepts: 'application/json',
        contentType: 'application/json',
        data: JSON.stringify(item),
        success: function (result) {
            getData();
        }
    });
    closeEditBox();
}

